<template>
  <div>
    <van-nav-bar left-arrow style="background: blue">
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #title>
        <span style="color: #fff">快递单评价</span>
      </template>
      <template #right>
        <span style="color: #fff" @click="onSubmits">提交</span>
      </template>
    </van-nav-bar>
    <div class="ct">
      <span>总体评分</span>
      <p><span :style="{fontSize: '2rem',color:'orange'}">{{rate*2}}</span>分</p>
      <div class="pingjia">
        <van-field name="rate">
          <template #input>
            <van-rate v-model="rate" />
          </template>
        </van-field>
      </div>
      <hr />
      <div>
        <span class="wenzi">店铺评分</span>
        <van-field name="rate2" label="店铺评分">
          <template #input>
            <van-rate v-model="rate2" />
          </template>
        </van-field>
        <van-field name="rate3" label="物流速度">
          <template #input>
            <van-rate v-model="rate3" />
          </template>
        </van-field>
        <van-field name="rate4" label="快递评分">
          <template #input>
            <van-rate v-model="rate4" />
          </template>
        </van-field>
      </div>
    </div>
    <div class="foot">
      <textarea id="" cols="30" rows="17" class="text" v-model="text"> </textarea>
      <div class="upload">
        <van-uploader :after-read="afterRead" />
      </div>
    </div>
  </div>
</template>

<script>
import { getLogisticsSingle } from "@/request/api";
export default {
  data() {
    return {
      rate: 3,
      rate2: 3,
      rate3: 3,
      rate4: 3,
      text:''
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    onSubmits() {
      getLogisticsSingle({
        //   店铺评分
        shop: this.rate2,
        //   物流速度
        logistics: this.rate3,
        //   快递评分
        express: this.rate4,
        //   总分
        totalScore: this.rate,
        //   订单编号
        orderCode: this.$route.query.val.orderCode,
        //   订单id
        id: this.$route.query.val.id,
        //   评价信息
        info: this.text,
      }).then((res) => {
        if (res.errCode == 0) {
          console.log(res);
        }
      });
    },
  },
  created() {
    this.$router.query;
    console.log("luyou", this.$route.query.val);
  },
};
</script>

<style scoped>
.ct {
  width: 100%;
  background: #fff;
  text-align: center;
  padding-top: 0.8rem;
}
.pingjia {
  width: 40%;
  margin: 0 auto;
}
.wenzi {
  display: block;
  margin: 0.6rem;
  text-align: left;
}
.foot {
  position: relative;
}
.upload {
  position: absolute;
  top: 15rem;
  left: 1rem;
}
.text {
  margin-top: 0.8rem;
  width: 100%;
  border: none;
}
</style>